<!-- 商铺 -->
<template>
	<view class="page">
		<!-- 商铺banner -->
		<image class="shop-banner" src="/pagesC-shopping/static/images/will-delete/shop-banner.jpg" mode="aspectFill">
		</image>
		<!-- 商铺信息 -->
		<ShopInfo></ShopInfo>
		<!-- 营业时间 -->
		<OpeningHours></OpeningHours>
		<!-- 站内优选 -->
		<RecommendGoods></RecommendGoods>
		<!-- 商品列表 -->
		<GoodsList></GoodsList>
		<!-- 底部操作 -->
		<c-fixed-bottom background-color="white" :height="bottomOperationHeight">
			<BottomOperation v-model:height="bottomOperationHeight"></BottomOperation>
		</c-fixed-bottom>

		<!-- 商品规格选择 -->
		<ComboChoosePanel v-if="isShowComboPanel"></ComboChoosePanel>
		<!-- 加入购物车动画 -->
		<AddCartAnimation></AddCartAnimation>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { useShopStore } from './store.js';
	import ShopInfo from './components/shop-info.vue';
	import OpeningHours from './components/opening-hours.vue';
	import RecommendGoods from './components/recommend-goods.vue';
	import GoodsList from './components/goods-list.vue';
	import BottomOperation from './components/bottom-operation.vue';
	import ComboChoosePanel from './components/combo-choose-panel.vue';
	import AddCartAnimation from './components/add-cart-animation.vue';

	uni.setNavigationBarTitle({
		title: '鱼米之乡农资站'
	});

	// 底部动态高度
	const bottomOperationHeight = ref('auto');
	
	// 商品规格选择面板
	const isShowComboPanel = computed(() => {
		return useShopStore().isShowComboPanel;
	});
</script>

<style lang="scss" scoped>
	.shop-banner {
		display: block;
		width: 100%;
		height: 260rpx;
	}
</style>